<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      lang="en">
<head th:include="layout :: htmlhead" th:with="title='文件管理'">
    <meta charset="UTF-8">
    <!--<base th:href="@{/}">-->
<!--
    <link rel="stylesheet" href="layui/css/layui.css">
-->
</head>
<body>
<!--<div style="margin-top: 17px;margin-left: 1103px;">
    <span>搜索：</span><input type="text" style="height: 27px;width: 220px;" id="sear1" placeholder="请输入班级进行模糊查询"/>
</div>-->
<blockquote class="layui-elem-quote quoteBox">
    <div class="layui-form">
        <span style="font-weight:bold;text-align:center;">版本查询</span>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <select name="selVersion" lay-verify="required" id="selVersion" lay-filter="changeVer">
                <option value=""></option>
            </select>
        </div>
    </div>
    </div>
</blockquote>
<div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs5">
            <blockquote class="layui-elem-quote quoteBox">
                <span style="font-weight:bold;text-align:center;">SOP文件</span>
            </blockquote>
            <input type="hidden" th:value="${file_type}" id="fileType"/>
            <input type="hidden" th:value="${area}" id="area"/>
            <table class="layui-hide" id="dTable" lay-filter="tableFilter"></table>
        </div>
        <div class="layui-col-xs7">
            <blockquote class="layui-elem-quote quoteBox">
                <span style="font-weight:bold;text-align:center;">依赖安装包</span>
            </blockquote>
            <table class="layui-table" id="depTable" lay-filter="depTableFilter"></table>
        </div>
    </div>
</div>
<!--<div class="layui-card-body">
    <input type="hidden" th:value="${file_type}" id="fileType"/>
    <input type="hidden" th:value="${area}" id="area"/>
    <table class="layui-hide" id="dTable" lay-filter="tableFilter"></table>
</div>-->

<!--<script th:src="@{/js/jquery/jquery-3.3.1.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>-->
<script type="text/html" id="opBar">
    <a class="layui-btn layui-btn-xs" lay-event="download"><i class="layui-icon">&#xe601;</i>下载</a>
<!--    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
</script>
<script type="text/javascript"  th:inline="none">
    layui.use(['form','table','jquery'], function(){
        var form = layui.form;
        var table = layui.table;
        var $ = layui.$;

        form.render('select');

        var fileType=$("#fileType").val().toUpperCase();
        var area=$("#area").val();
        console.info(fileType);
        console.info(area);
        var host = 'http://'+window.location.host+"/appm";
        $.ajax({
            type: 'POST',
            url: host+"/index/getAllVersionByType",
            //dataType: 'json',
            data: {fileType: fileType, sopArea: area},//往后台发送的是data.field，即一个{name：value}的数据结构
            async: true,
            success: function (result) {
                if (result.code == 0) {
                    $("#selVersion").empty();
                    $.each(result.version, function (i) {
                        $("#selVersion").append('<option value="' + result.version[i] + '">' + result.version[i] + '</option>');
                    })
                    form.render();//layui封装的遍历,每次绑定下拉框都需要加上
                    layer.msg('成功获取版本！', {icon: 1, time: 1000});
                    sopData();
                    depData();
                } else {
                    layer.msg('获取当前版本失败！' + result.msg, {icon: 2, time: 1000});
                }
            },
            error: function (result, type) {
                layer.msg('获取当前版本失败2！', {icon: 2, time: 1000});
            }
        });

        form.on('select(changeVer)', function(data) {
            sopData();
            depData()
        });
        //监听工具条
        table.on('tool(tableFilter)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('功能待开发', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'download'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
                layer.msg("开始下载文件: "+data.fileName);
                var durl = 'rpt/download/'+data.id+'/sop';
                var curWwwPath=window.document.location.href;
                var pathName=window.document.location.pathname;
                var pos=curWwwPath.indexOf(pathName);
                var localhostPaht=curWwwPath.substring(0,pos);
                var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
                window.open(localhostPaht + projectName+ '/' + durl);
            }
        });
        //监听工具条
        table.on('tool(depTableFilter)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('功能待开发', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'download'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
                layer.msg("开始下载文件: "+data.fileName);
                var durl = 'rpt/download/'+data.id+'/dep';
                var curWwwPath=window.document.location.href;
                var pathName=window.document.location.pathname;
                var pos=curWwwPath.indexOf(pathName);
                var localhostPaht=curWwwPath.substring(0,pos);
                var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
                window.open(localhostPaht + projectName+ '/' + durl);
            }
        });


    });

    function sopData(){
        var table = layui.table;
        var fileType=$("#fileType").val();
        var area=$("#area").val();
        var ver=$("#selVersion").val();
        console.log(fileType+":"+area+":"+ver);
        var host = 'http://'+window.location.host+"/appm";
        table.render({
            elem: '#dTable'
            ,url: host+'/rpt/showSopData/'+area+'/'+fileType+'/'+ver
            ,limit:5 //默认为10
            ,cols: [[
                 {type:'numbers', width:50, title: '序号', sort: true} //sort：true页面可进行排序操作
                ,{field:'id', width:80, title: '编号', sort: true} //sort：true页面可进行排序操作
                ,{field:'sopFileType', width:80, title: '类别'}
                ,{field:'sopFileName', width:200, title: 'SOP文件名', sort: true}
                ,{field:'sopVersion', width:80, title: '版本号'}
                ,{field:'sopPath',width:300, title: '路径'}
                ,{field:'suffix',width:100, title: '文件类型' }
                ,{field:'createTime', width:180, title: '上传日期', sort: true }
                ,{field:'right', width:100, title: '常用操作', toolbar: '#opBar'}
            ]]
            ,page: true
            ,done:function(res, curr, count){
                //数据的回调用，可不写
                $("[data-field='id']").css('display','none');
                $("[data-field='sopPath']").css('display','none');
                $("[data-field='suffix']").css('display','none');
                $("[data-field='createTime']").css('display','none');
            }
        });
    }

    function depData(){
        var table = layui.table;
        var fileType=$("#fileType").val();
        var area=$("#area").val();
        var ver=$("#selVersion").val();
        console.log(fileType+":"+area+":"+ver);
        var host = 'http://'+window.location.host+"/appm";
        table.render({
            elem: '#depTable'
            ,url: host+'/rpt/showDepData/'+area+'/'+fileType+'/'+ver
            ,limit:5 //默认为10
            ,cols: [[
                {type:'numbers', width:50, title: '序号', sort: true} //sort：true页面可进行排序操作
                ,{field:'id', width:80, title: '编号', sort: true} //sort：true页面可进行排序操作
                ,{field:'depFileType', width:80, title: '类别'}
                ,{field:'depFileName', width:300, title: '文件名', sort: true}
                ,{field:'depPath', width:180, title: '上传日期', sort: true }
                ,{field:'right', width:100, title: '常用操作', toolbar: '#opBar'}
            ]]
            ,page: true
            ,done:function(res, curr, count){
                //数据的回调用，可不写
                $("[data-field='id']").css('display','none');
                $("[data-field='depPath']").css('display','none');
            }
        });
    }
    /*$("#sear1").keyup(function(event){
        if(event.keyCode ==13){
            var keyWord=$("#sear1").val();
            addData(keyWord);
        }
    });*/
</script>

</body>
</html>